﻿$(function(){
				
	var x,y,w,h;
	var $preview , $preview_img , $cropbox , $cropbox_img;
	var preview_w,preview_h ,  cropbox_img_h , cropbox_img_w  ;
	$cropbox = $('#cropbox') ;	
	$preview = $('#preview');
	//$preview_img = $('#preview img');
	preview_w = $('#preview').width();
	preview_h = $('#preview').height();
	//$('#cropbox').Jcrop({ aspectRatio: 1, onSelect: updateCoords }); 
	$('#Photo_Crop_Upload').click(function(){loading('show'); });
	$('#Photo_Crop_Submit').click(function(){
		checkCoords(this);
		return false;
	
	});
	 
	
	function updateCoords(c) {
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
		x = c.x;
		y = c.y;
		w = c.w;
		h = c.h; 
		showPreview(c);
	};
	
	function checkCoords(obj)
	{
		if (!parseInt($('#w').val())){
			alert('请选择要裁减的区域之后, 再裁减.');
			return false;
		}		
		ajaxCropUpload(obj);
	};
	
	$.creatCropImage = function(src,aspectRatioc){
		if( !aspectRatioc ) aspectRatio = 16/9;
		$('#cropbox').html('<img src="'+ src +'" />');	
		$cropbox_img = $('#cropbox img') ;
		cropbox_img_w = $cropbox_img.width();
		cropbox_img_h = $cropbox_img.height();
		setTimeout(function(){
				//loading('hide');
				$cropbox_img.Jcrop({
					aspectRatio:aspectRatioc ,
					setSelect: [ 5, 5, 105, 105 ] ,
					onSelect: updateCoords 
					//onChange: showPreview
				});
				$('#preview').html('<img />');
				$preview_img = $('#preview img');
				$preview_img.attr('src',$cropbox_img.attr('src'));
				$preview.show();
				
		} , 10);
	};
	
	
	function showPreview(coords){
		if (parseInt(coords.w) > 0)
		{
			var rx = preview_w / coords.w;
			var ry = preview_h / coords.h;
			$('#ww').html(coords.w);
			$('#hh').html(coords.h);
	
			jQuery('#preview img').animate({
				width: Math.round(rx * $cropbox_img.width()) + 'px',
				height: Math.round(ry * $cropbox_img.height()) + 'px',
				marginLeft: '-' + Math.round(rx * coords.x) + 'px',
				marginTop: '-' + Math.round(ry * coords.y) + 'px'
			},'normal');
		}
	};
	
	function ajaxCropUpload(obj){
		$obj = $(obj);
		$.ajax({
			url : $obj.attr('action') +'&time='+ (new Date()).valueOf() ,
			type: 'POST',
			dataType : 'json',
			data:{ 'src': $('#cropbox img').attr('src') ,'x':$('#x').val(),'y':$('#y').val(),'w':$('#w').val(),'h':$('#h').val(),'userface':$obj.attr('path') },
			success: function ( data ){
			
				if('OK' == data.status){
					$('#cropbox,#preview,#previewCrop').hide('slow');
					$('#mediaThumbPhoto').html(data.photo);
				}else{
					alert(data );
				}
			},
			error: function (  msg , e ) { alert( msg );alert( e ); }
		});	
		return false;
	};
	
	function loading(status){
		if( status =='show') $('#loading').show();
		else $('#loading').hide();
	}
});



function FileUploadOK(src){
	$('#cropbox,#preview,#previewCrop').show('show');
	$('#mediaThumbPhoto').html('');	
	$('#previewCrop').show();	
	$.creatCropImage(src,aspectRatioc);
	
};